<style>
.custom-list {
  overflow-y: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  width: 50%;
  background-color: #fff;
  box-shadow: 0 0 10px #777;
  border: 1px solid #777;
}
.custom-list dl {
  margin: 0 1em 2em;
}
.custom-list dt {
  margin-bottom: 1em;
  font-size: 1.125em;
  color: #4a4a4a;
}
.custom-list dd {
  overflow: hidden;
  display: inline-block;
  width: 102px;
  margin: 0 1em 1em 0;
  line-height: 1.2;
  text-align: center;
  vertical-align: top;
}
.custom-list img {
  display: block;
  max-width: 100px;
  max-height: 120px;
  margin: 5px 0;
  border: 1px solid #bbb;
}
.custom-list .attr-val {
  font-size: 14px;
}
.custom-list th,
.custom-list td {
  border: none;
}
.custom-list th {
  width: 10%;
}
.custom-list td {
  width: 90%;
}
.monogram > dd {
  display: block;
  width: auto;
}
.monogram th {
  background: none;
  font-size: 1.125em;
}
.monogram img {
  display: inline-block;
}
.monogram p {
  width: 50%;
  background-color: #484848;
  color: #fff;
  text-align: center;
  font-size: 1.3em;
  line-height: 2;
}
.shoes-monogram {
  width: 316px;
  height: 316px;
  text-align: center;
}
.shoes-monogram:before {
  display: inline-block;
  height: 316px;
  content: "";
  vertical-align: middle;
}
.shoes-monogram > em {
  display: inline-block;
  width: 98%;
  vertical-align: middle;
  font-size: 24px;
  font-style: normal;
  color: #fff;
}
.custom-list .options dd {
  width: auto;
}
@media screen and (max-width: 1024px) {
  .custom-list {
    width: 80%;
  }
}
@media screen and (max-width: 320px) {
  .custom-list {
    width: 90%;
  }
}
</style>
<?php foreach($size_type as $key => $size_type_val):
  if($key == 0):
?>
<dl>
  <dt><?php echo L('_size_type_'.$size_type_val); ?></dt>
  <?php
    $order_i=0;
    foreach ($attributeList as $attr_id => $attr):
      if($attr_id != 9999):
        //当短袖的时候，不显示袖口
        if($attr_id == 75 && isset($attributeList['149'])){
            foreach($attributeList['149']['values'] as $dxk){
              if($attributeList['149']['default'] == $dxk['product_attr_id'] && $dxk['attr_value_id'] == 833){
              continue 2;
            }
          }
        }
  ?>
  <?php if($attr['size_type'] == $size_type_val && $attr['attr_pro_type'] == 0 && $attr_id != 83): $order_i++;?>
    <?php
     if(isset($attr['values']) && $attr['values']):
      foreach ($attr['values'] as $attrv):
    ?>
    <?php if($attr['default']== $attrv['product_attr_id']):?>
    <dd>
      <p><?php echo $attr['name'];?></p>
      <img src="<?php echo $attrv['image2'];?>" />
      <p class="attr-val"><?php echo $attrv['label'];?></p>
    </dd>
    <?php endif;?>
    <?php endforeach;?>
    <?php endif;?>
  <?php endif;endif;endforeach;?>
</dl>
<?php endif;endforeach;?>

<?php
  if(isset($attributeList[9999]) && $product['model_id'] != 25 && $product['catid'] != 2162):

  //绣字为空的话不显示
  $monogram = '';
  foreach ($attributeList as $attr_id => $attr):
  if($attr['attr_pro_fid'] == '9999' && $attr['attr_pro_type'] == 1):
    $monogram .= $attr['default'];
  endif;
  endforeach;
  if($monogram)://绣字为空的话不显示

    foreach ($attributeList as $attr_id => $attr){
     if($attr['attr_pro_fid'] == '9999' && $attr['attr_pro_type'] == 1){
       if($help_attr_first_id == 0) $help_attr_first_id = $attr_id;
       $help_attr_count ++;
     }
    }
?>
<!-- monogram, start -->
<dl class="monogram">
  <dt>
    <?php if($product['model_id'] == 14):echo L('shirt_monogram');?>
    <?php elseif($product['model_id'] == 22): echo L('coat_monogram');?>
    <?php elseif($product['model_id'] == 22):echo L('coat_monogram');?>
    <?php elseif($product['model_id'] == 26):echo "牛仔裤绣字";?>
    <?php else: echo L('jacket_monogram'); endif;?>
  </dt>
  <?php
    $font = 'Arial';
      foreach ($attributeList as $attr_id => $attr):
           if($attr['attr_pro_fid'] == '9999' && $attr['attr_pro_type'] == 2):
                foreach($attr['values'] as $attrv2):
                      if($attr['default'] == $attrv2['product_attr_id']):
                          $font = $attrv2['label'];
                       endif;
                endforeach;
           endif;
      endforeach;
    ?>
    <?php
      $back_color = '#FFFFFF';
      foreach ($attributeList as $attr_id => $attr):
           if($attr['attr_pro_fid'] == '9999' && $attr['attr_pro_type'] == 3):
                foreach($attr['values'] as $attrv2):
                    if($attr['default'] == $attrv2['product_attr_id']):
                        $color_arr = explode('#',$attrv2['label']);
                        if(is_array($color_arr) && isset($color_arr)){
                            $back_color = '#'.$color_arr[1];
                        }
                    endif;
                endforeach;
          endif;
      endforeach;
  ?>
  <dd>
    <table class="align-left">
      <tr>
        <th><?php echo L('_Preview_');?></th>
        <td colspan="3">
          <?php
            foreach ($attributeList as $attr_id => $attr):
              if($attr['attr_pro_fid'] == '9999' && $attr['attr_pro_type'] == 1):
          ?>
          <p style="font-family:<?php echo $font;?>;color:<?php echo $back_color;?>"><?php if(isset($attr['default']) && $attr['default']){echo $attr['default'];}?></p>
          <?php
              endif;
            endforeach;
          ?>
        </td>
      </tr>
    </table>
  </dd>
</dl>
      <!--衬衫绣字位置-->
<?php if(isset($attributeList[83]) && !empty($attributeList[83])):  ?>
      <dl>
          <dd>
              <p><?php echo $attributeList[83]['name'];?></p>
              <?php
              foreach ($attributeList[83]['values'] as $attrv):
                  ?>
                  <?php if($attributeList[83]['default']== $attrv['product_attr_id']):?>
                  <img src="<?php echo $attrv['image2'];?>" />
                  <p class="attr-val"><?php echo $attrv['label'];?></p>
              <?php endif;?>
              <?php endforeach;?>
          </dd>
      </dl>
  <?php endif;?>
      <!--衬衫绣字位置-->
      <!--牛仔裤绣字位置-->
<?php if(isset($attributeList[169]) && !empty($attributeList[169])):  ?>
      <dl>
          <dd>
              <p><?php echo $attributeList[169]['name'];?></p>
              <?php
              foreach ($attributeList[169]['values'] as $attrv):
                  ?>
                  <?php if($attributeList[169]['default']== $attrv['product_attr_id']):?>
                  <img src="<?php echo $attrv['image2'];?>" />
                  <p class="attr-val"><?php echo $attrv['label'];?></p>
              <?php endif;?>
              <?php endforeach;?>
          </dd>
      </dl>
  <?php endif;?>
      <!--牛仔裤绣字位置-->
<!-- monogram, end -->
<?php endif;?>
<?php endif; ?>

<?php
  if($product['model_id'] == 25):
?>
<?php
  //绣字为空的话不显示
  $monogram = '';
  foreach ($attributeList as $attr_id => $attr):
  if($attr['attr_pro_fid'] == '9999' && $attr['attr_pro_type'] == 1):
    $monogram .= $attr['default'];
  endif;
  endforeach;
  if($monogram)://绣字为空的话不显示
?>
<!-- shoes monogram, start -->
<dl class="monogram">
  <dt><?php echo L('LETTERING');?></dt>
  <?php
    $background_img = '';
      foreach ($attributeList as $attr_id => $attr):
         if($attr_id == 157):
  ?>
    <?php foreach ($attr['values'] as $attrv):?>
      <?php if($attr['default'] == $attrv['product_attr_id']):?>
        <?php $background_img = $attrv['image']; ?>
      <?php endif;?>
    <?php endforeach;?>
  <?php
      endif;
    endforeach;
  ?>
  <dd>
    <table class="align-left">
      <tr>
        <th><?php echo L('_Preview_');?></th>
        <td colspan="3">
          <?php
            foreach ($attributeList as $attr_id => $attr):
              if($attr['attr_pro_fid'] == '9999' && $attr['attr_pro_type'] == 1):
          ?>
          <div class="shoes-monogram" style="background:url(<?php echo $background_img;?>) 50% 0% / cover #ccc;">
            <em><?php if(isset($attr['default']) && $attr['default']){echo $attr['default'];}?></em>
          </div>
          <?php
              endif;
            endforeach;
          ?>
        </td>
      </tr>
    </table>
  </dd>
</dl>
<!-- shoes monogram, end -->
<?php endif; ?>
<dl>
  <dt><?php echo L('_measurement_cart_');?></dt>
  <dd>
    <?php
      foreach ($attributeList as $attr_id => $attr):
        if($attr_id == 158):
    ?>
      <?php foreach ($attr['values'] as $attrv):?>
        <?php if($attr['default'] == $attrv['product_attr_id']):?>
          <?php echo $attr['name'].':'.$attrv['label'];?>
        <?php endif;?>
      <?php endforeach;?>
    <?php
        endif;
      endforeach;
    ?>
  </dd>
  <?php
    foreach ($attributeList as $attr_id => $attr):
      if($attr['attr_pro_fid'] == '9998' && $attr['attr_pro_type'] == 1):
  ?>
  <dd><?php echo $attr['name'];?>:<?php if(isset($attr['default']) && $attr['default']){echo $attr['default'];}?></dd>
  <?php
      endif;
    endforeach;
  ?>
</dl>
<dl>
  <dt><?php echo L('STANDARD_SIZE');?></dt>
 <!--  <dd>
    <?php
      foreach ($attributeList as $attr_id => $attr):
        if($attr_id == 161):
    ?>
    <?php echo $attr['name'];?>:
      <?php foreach ($attr['values'] as $attrv):?>
        <?php if($attr['default'] == $attrv['product_attr_id']):?>
          <?php echo $attrv['label'];?>
        <?php endif;?>
      <?php endforeach;?>
    <?php
        endif;
      endforeach;
    ?>
  </dd>-->
  <dd>
    <?php
      foreach ($attributeList as $attr_id => $attr):
        if($attr['attr_pro_fid'] == '9997' && $attr['attr_pro_type'] == 1):
    ?>
      <?php echo $attr['name'];?>:<?php if(isset($attr['default']) && $attr['default']){echo $attr['default'];}?>
    <?php
        endif;
      endforeach;
    ?>
  </dd>
</dl>
<?php endif; ?>

<?php foreach($size_type as $key => $size_type_val):
  if($key > 0):
?>
<dl>
  <dt><?php echo L('_size_type_'.$size_type_val);?></dt>
  <?php
    foreach ($attributeList as $attr_id => $attr):
      if($attr_id != 9999):
  ?>
  <?php if($attr['size_type'] == $size_type_val && $attr['attr_pro_type'] == 0 && $attr_id != 83): $order_i++;?>
  <dd>
    <p><?php echo $attr['name'];?></p>
    <?php
      if(isset($attr['values']) && $attr['values']):
        foreach ($attr['values'] as $attrv):
    ?>
    <?php if($attr['default']== $attrv['product_attr_id']):?>
    <img src="<?php echo $attrv['image2'];?>" />
    <p class="attr-val"><?php echo $attrv['label'];?></p>
    <?php endif;?>
    <?php endforeach;?>
    <?php endif;?>
  </dd>
  <?php endif;endif;endforeach;?>
</dl>
<?php endif;endforeach;?>

<?php
  foreach ($attributeList as $attr_id => $attr):
    if($attr['attr_pro_type'] == 4):
?>
<dl class="options">
  <dt><?php echo L('_options_');?></dt>
  <?php if($attr['attr_pro_type'] == 4): ?>
    <?php
    foreach ($attributeList as $op_attr_id => $op_attr):
      if($op_attr['attr_pro_fid'] == $attr_id && $op_attr['attr_pro_type'] == 5):
    ?>
      <?php foreach($op_attr['values'] as $attrv3):?>
      <?php if($op_attr['default']== $attrv3['product_attr_id']):?>
      <dd><?php echo $op_attr['name']?>: <?php echo $attrv3['label'];?></dd>
      <?php endif;?>
      <?php endforeach;?>
    <?php
        endif;
      endforeach;
    ?>

    <?php
      $default_arr = explode('|',$attr['default']);
      foreach($attr['values'] as $attrv2):
    ?>
    <?php if(in_array($attrv2['product_attr_id'],$default_arr)):?>
    <dd><?php echo $attrv2['label']; ?>: Select</dd>
    <?php endif;?>
    <?php endforeach;?>

    <?php
      foreach ($attributeList as $op_attr_id => $op_attr):
        if($op_attr['attr_pro_fid'] == $attr_id && $op_attr['attr_pro_type'] == 3):
    ?>
      <?php
        if(isset($op_attr['values']) && $op_attr['values']):
          foreach ($op_attr['values'] as $attrv):
      ?>
        <?php if($op_attr['default']== $attrv['product_attr_id']):?>
        <dd><?php echo $op_attr['name'];?>:<img src="<?php echo $attrv['image'];?>" /></dd>
        <?php endif;?>
      <?php
          endforeach;
        endif;
      ?>
    <?php
        endif;
      endforeach;
    ?>
  <?php endif;?>
</dl>
<?php
    endif;
  endforeach;
?>
<i class="close js-close">×</i>

<script>
$('.js-check-options').on('click', function () {//定制项弹出框
  var $customList = $(this).next(),
      $mask = $('.js-option-mask'),
      verticalPadding = parseInt($customList.css('padding-top')) + parseInt($customList.css('padding-bottom')),
      winHeight = $(window).height();

  $customList.removeClass('hide');
  if ($customList.outerHeight() > winHeight) {
    $customList.height(winHeight - verticalPadding);
  }
  position.fixPosition($customList);
  if ($mask.length === 0) {
    $('<div class="mask js-option-mask"></div>').appendTo('body').show();
    $mask = $('.js-option-mask');
  }
})
.next('.js-custom-list')
.on('click', '.js-close', function () {
  $(this).parent().addClass('hide');
  $('.js-option-mask').remove();
});
</script>